<script setup lang="ts">
import { useDark, useECharts } from "@pureadmin/utils";

import { type PropType, ref, computed, watch, nextTick } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => []
  },
  color: {
    type: String,
    default: "#41b6ff"
  }
});
// console.log("统计图",props);

const getSeries = () => {
  let res = []
  props.data?.data.forEach(item => {
    res.push({
      type: "bar",
      data: item.value,
      name: item.name,
      barWidth: 10,
      stack:'baba',
      itemStyle: {
            color: item.color,
            borderRadius: [0, 0, 0, 0]
          },
    })
  });
  return res
}

const getxAxis = () => {
  let res = []
  props.data?.xAxis.forEach(item => {
    res.push(item)
  })
  return res
}  
        
const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  theme
});

watch(
  () => props,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      container: ".bar-card",
      color: ["#41b6ff", "#e85f33"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none"
        }
      },
      grid: {
        left: '3%',
        right: 0,
        bottom: '3%',
        containLabel: true
      },
      legend: {
        // data: ["人工工单", "告警工单","巡检工单","隐患上报"],
        itemWidth : 8,
          itemHeight: 8,
        textStyle: {
         
          // fontSize: "0.875rem",
          fontSize: "0.875rem",
                 fontWeight:400,
                 fontFamily:'PingFang SC',
        },
        top: 0,
        left:0,
        icon:"circle"
      },
      dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: true, //是否显示滑动条，不影响使用
        type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: props.data?.endValue, // 一次性展示几个。
      },
    ],
      xAxis: [
        {
          type: "category",
          show: true,
          boundaryGap: false,
          data: getxAxis(),
          axisLabel: {
            fontSize: "0.875rem"
          },
          axisPointer: {
            type: "shadow"
          }
        }

      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            fontSize: "0.875rem"
          },
          splitLine: {
            show: false // 去网格线
          }
          // name: "单位: 个"
        }
      ],
      series:getSeries()
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 260px" />
</template>
